前言

上一篇說明了如何在 Angular 專案中安裝與設定 Jest 框架，這一篇來看看 Jest 與 Jasmine 框架之間有什麼差異。

利用 Jest 撰寫測試案例

在 Jest 框架中，可以使用 test() 與 it() 方法來描述撰寫測試案例。而群組化測試案例則與 Jasmine 一樣使用 describe 方法。

test('測試案例', {} => {
  ...
})

若希望只針對特定案例進行測試，是使用 only() 方法；反之，如果要忽略特定測試案例，則會使用 skip() 方法。

test.only('測試案例', {} => {
  ...
})

test.skip('測試案例', {} => {
  ...
})

Jest 的生命週期

在生命週期部份，Jest 框架如同於 Jasmine 框架使用下面四個方法簽章。

• beforeAll

• beforeEach

• afterEach

• afterAll

建立 Jest 假物件方法

在 Jasmine 框架中，我們會利用 spyOn 或 jasmine.createSpyObj 兩個方法來建立假的方法或物件。而在 Jest 框架中則會使用 jest.fn() 方法建立 mock 方法，並利用 mockReturnValue 與 withImplementation 來設定此方法的回傳值。因此，在 ProductPageComponent 頁面元件的測試程式中，就會改用 jest.fn() 來建立取得產品清單的方法。

let productService: Partial<ProductService>;

beforeEach(async () => {
  productService = {
    getProducts: jest.fn().mockReturnValue(of(products)),
  };
  ...
});

結語

「今天我想來在 Angular 應用程式上加上測試保護」這一系列文章到此告一個段落 (累攤)，在整個系列中我們說明了如何在 Angular 專案中撰寫單元測試與端對端測試。在實務上，撰寫任何的程式碼都有相對應的成本，然而測試程式的撰寫在短期開發上可能會有較高的成本 (依產品程式架構而定)，但從長期維護的角度來看，它可以大大降低人工測試的成本。進一步利用 TDD 或 BDD 的開發方式，來發展產品程式架構，以及與軟體關係人的需求溝通，更能提高開發軟體的品質。